<template>
    <div>
        <div class="mui-content">
            <div id="slider" class="mui-slider">
                <div id="sliderSegmentedControl"
                    class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html"
                            @click="showComponent('home')">
                            推荐
                        </a>
                        <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                            当季
                        </a>
                        <a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html"
                            @click="showComponent('fruits')">
                            水果
                        </a>
                        <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                            零食
                        </a>
                        <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html"
                            @click="showComponent('vegetable')">
                            蔬菜
                        </a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html"
                            @click="showComponent('flower')">
                            鲜花
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <home-swipper></home-swipper>
            <home-card-fruits v-show="currentComponent === 'home' || currentComponent === 'fruits'"></home-card-fruits>
            <home-card-vegetable
                v-show="currentComponent === 'home' || currentComponent === 'vegetable'"></home-card-vegetable>
            <home-card-flower v-show="currentComponent === 'home' || currentComponent === 'flower'"></home-card-flower>
        </div>
       
    </div>
</template>

<script>
import HomeSwipper from './components/HomeSwipper.vue';
import HomeCardFruits from './components/HomeCardFruits.vue';
import HomeCardVegetable from './components/HomeCardVegetable.vue';
import HomeCardFlower from './components/HomeCardFlower.vue';

import mui from "../../mui/js/mui.js"
mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005
})

export default {
    name: 'Home',
    components: {
        HomeSwipper,
        HomeCardFruits,
        HomeCardVegetable,
        HomeCardFlower,
    },
    data() {
        return {
            currentComponent: 'home'
        }
    },
    methods: {
        showComponent(name) {
            this.currentComponent = name
        }
    }
}
</script>

<style scoped>
* {
    touch-action: pan-y
}


.mui-scroll {
    background: white;
}

.mui-active {
    color: #e02e24 !important;
    font-weight: bolder;
}

body {
    background: white !important;
}

.div {
    padding-bottom: 20px
}
</style>